@import "../../../style/_condition_view.less";

@color-red: #e5603b;
@color-gray: #999;

.font-normal() {
  font-family: "Microsoft Yahei Regular", "Microsoft Yahei";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  text-decoration: none;
}

.button() {
  cursor: pointer;

  &.disabled {
    cursor: not-allowed;
  }
}

.hover-disabled(@color, @hover-color: rgb(255, 255, 255)) {
  color: @color;

  &:hover {
    color: @hover-color;
  }

  &.disabled:hover {
    color: @color;
  }
}

.font-bigger() {
  .font-normal();
  font-size: 20px;
}

.row-base(@top: 5px) {
  vertical-align: top;
  margin-top: @top;
}

.widget-normal {
  @gray-color: #AAAAAA;
  @gray-text: #DDDDDD;

  & .widget-content {
    & .baner {
      background-color: rgba(51, 51, 51, 0.2);
      margin: 0px -15px;
      padding: 6px 15px;

      & .lbtn-gray {
        .font-normal();
        .button();
        .hover-disabled(@gray-color, @gray-text);
        display: inline-block;

        & .iconfont {
          .font-bigger();
          vertical-align: middle;
        }

        & .text {
          line-height: 20px;
          margin-left: 8px;
          vertical-align: middle;
        }
      } // .lbtn-gray

      & .tookit {
        float: right;
        margin-top: 2px;

        & .container {
          display: inline-block;
          color: @gray-text;
          padding: 0px 10px;
        }

        & .lbtn-gray {
          margin: auto 5px;

          &:last-child {
            margin-right: 0px;
          }
        }

        & .spliter {
          display: inline-block;
          padding: 0px 5px;
          color: @gray-color;
        }
      }
    } // .baner

    & .indicator {
      display: block;
      position: relative;
      vertical-align: top;
      margin-bottom: 10px;

      & .spliter {
        display: inline-block;
        padding: 0 10px;
        width: 14px;
        .row-base();
      }

      & .condition-container {
        float: left;
        width: 214px;

        & .condition {
          display: inline-block;
          min-width: 180px;
        }
      }

      & .values {
        margin: auto 30px -10px 214px;
        box-sizing: border-box;
        // border-right: 2px solid black;

        & .value-container {
          display: inline-block;

          & .value {
            display: inline-block;
            min-width: 120px;
            margin-bottom: 10px;
          }

          & .btn-subtract {
            display: inline-block;
            .button();
            .font-normal();
            .hover-disabled(@gray-color, @gray-text);
          }
        }

        & .btn-add {
          display: inline-block;
          .row-base(4px);
          .button();
          .font-normal();
          .hover-disabled(@gray-color, @gray-text);
        }

        & + .remove {
          position: absolute;
          right: 0px;
          bottom: 9px;
        }
      } // .values
    } // .indicator

    & .line-add {
      height: 33px;
      overflow: hidden;
      margin: 11px auto;

      & .btn-container {
        float: left;
        width: 63px;

        & .btn-add {
          float: right;
          font-size: 22px;
          .button();
          .hover-disabled(@gray-color, @gray-text);
        }

        &:after {
          content: '';
          clear: both;
        }
      }

      & .line-container {
        margin-left: 63px;
        vertical-align: top;
        overflow: hidden;

        & .line {
          height: 1px;
          background-color: @gray-color;
          margin-top: 16px;
        }
      }
    } // line-add

    & .dimemsion {
      display: block;
      position: relative;
      height: 43px;

      & .select {
        display: inline-block;
        min-width: 180px;

        & + .extension {
          display: inline-block;
          position: relative;
          padding: 0 0 0 10px;
          .row-base();
          .font-normal();
          .button();
          .hover-disabled(@gray-color, @gray-text);

          & + .menu {
            position: absolute;
            left: 185px;
            top: 33px;

            &:before {
              content: '';
              display: inline-block;
              position: absolute;
              top: -12px;
              left: 7px;
              border-top: 6px solid transparent;
              border-left: 6px solid transparent;
              border-right: 6px solid transparent;
              border-bottom: 6px solid #F5F5F5;
            }
          }
        }
      }
    } // dimemsion

    .iconfont.remove {
      .button();
      .hover-disabled(@gray-color, @gray-text);
      display: inline-block;
      font-size: 20px;
      font-weight: bold;
      vertical-align: top;
      margin: 2px 8px;
    }
  }

  & .slider-track {
    height: 2px;

    & .slider-handle {
      width: 14px;
      height: 14px;
      margin-top: -6.5px;
    }
  }

  .condition-view-widget-normal();

  .condition-add {
    .button();
    .hover-disabled(@gray-color, @gray-text);
    display: inline-block;
    vertical-align: top;
    margin-top: -1px;
    font-size: 22px;
  }
}

.auto-row {
  display: block;
  position: relative;
  margin: 10px auto;

  & .left {
    float: left;
    vertical-align: top;
    font-weight: bold;
    padding-top: 5px;
    width: 95px;

    &:after {
      content: '';
      clear: both;
    }
  }

  & .main {
    display: block;
    margin-left: 95px;
  }
}

.widget-float.value-container {
  @color-line: #E5E5E5;
  @color-icon-button: #666;
  @color-disabled: #CCCCCC;

  width: 415px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  overflow: hidden;

  & .header {
    border-bottom: 1px solid @color-line;
    height: 24px;
    line-height: 24px;
    padding: 15px;
    font-size: 16px;
    margin: -7.5px -7.5px 0px -7.5px;
    background-color: white;

    & .iconfont {
      .button();
    }
  } // header

  & .body {
    margin: 0px -7.5px -7.5px;
    background-color: white;
    padding: 7.5px;
    box-sizing: border-box;
    border-left: 1px solid @color-line;
    border-right: 1px solid @color-line;

    & .radio-ul {
      margin: 10px auto;

      & .radio-li {
        margin: 10px auto;

        & .radio {
          display: block;
          float: left;
          line-height: 21px;
          height: 21px;
          margin-left: 8px;
          vertical-align: top;
          margin-top: 2px;
        }

        & .radio-label {
          display: block;
          margin-left: 30px;
          line-height: 21px;
          height: 21px;

          &::after {
            content: '';
            clear: both;
          }
        }
      }
    } // radios

    .between {
      margin-left: 10px;
      line-height: 34px;
      margin-bottom: 5px;

      &:last-child {
        margin-bottom: 0px;
      }

      div {
        display: inline-block;

        &.iconfont {
          .button();
          .hover-disabled(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
          font-size: 20px;
          vertical-align: top;
          margin-left: 20px;
          margin-top: 2px;
          font-weight: bold;
        }
      }

      .value {
        width: 80px;
        text-align: center;
        margin: auto 5px;

        .input-text.disabled {
          color: white;
          background-color: @color-disabled;
        }
      }
    } // between
  } // body

  & .footer {
    border-top: 1px solid @color-line;
    line-height: 55px;
    height: 55px;
    padding: 7.5px 15px 0px;
    display: block;
    margin: 7.5px -7.5px 0px;
  } // .footer
}

.dialog {
  .dialog-content .favorite {
    .form-group.horizontal li {
      padding-left: 8em;

      .input-text {
        float: none;
        width: 100%;
      }

      .note-attention {
        font-size: 14px;
        color: #eac85e;
        margin-top: 5px;
      }

      .control-label {
        width: 6em;
      }
    }
  } // .dialog-content .favorite
}

.Select-menu-outer-noscroll {
  max-height: initial;

  .Select-menu {
    max-height: initial;
    overflow-y: initial;

    .group-title.line-spliter {
      border-top: 1px solid #cccccc;
      margin-top: 1px;
      margin-bottom: 1px;
    }
  }

  .Select-option {
    position: relative;

    .icon-right {
      float: right;
      border-left: 5px solid #999999;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    &.is-focused .float-container {
      display: block;
    }

    .float-container {
      display: none;
      position: absolute;
      background-color: #FFFFFF;
      // text-align: center;
      width: 90px;
      top: 0px;
      border-radius: 4px;
      right: -92px;

      ul {
        margin-left: -20px;
        padding-left: 20px;
      }

      .Select-option {
        &:hover {
          background-color: #f2f9fc;
          color: #333333;
        }

        &:first-child {
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
        }

        &:last-child {
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
        }
      }
    }
  }
}

.widget-float {
  .tooltip-error {
    text-align: center;
    color: #e55b41;
    padding: 10px;
  }
}

.chart-baner {
  .float-right {
    .icon-group {
      display: inline-block;
      vertical-align: top;

      &:last-child {
        margin-top: 1px;
        margin-right: 20px;

        .iconfont {
          margin-left: 8px;
        }
      }

      .iconfont {
        .button();
        display: inline-block;

        &.selected {
          color: #FFFFFF;
        }
      }
    } // .icon-group

    .component-group {
      display: inline-block;
      vertical-align: top;
      margin-top: 7px;

      &.switch-group {
        float: none;
      }

      &.text {
        margin: 9px 10px 0px 10px;
        color: #cccccc;
      }
    } // .component-group
  }
}

.value-unknown {
  font-size: 12px;
  border: 1px solid #745ec5;
  color: #745ec5;
  background: #e9e5f6;
  border-radius: 2px;
  padding: 2px 4px 0 4px;
  display: inline-block;
  white-space: nowrap;
}

.event-table {
  .col-date {
    min-width: 100px;
  }

  .event-table-grid {
    width: 100%;
    overflow-x: auto;
  }
  .table {
    .sortedtext {
      min-width: 35px;
    }
  }

  .ratio {
    font-weight: 300;
    font-size: 14px;
    display: block;
    &.ratio-neg {
      color: #FF734C;
    }
    &.ratio-pos {
      color: #00CC66;
    }
  }
  .input-group {
    width: 200px;
    display: inline-block;
    margin-right: 15px;
  }
  .by-overflow {
    max-width: 184px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
  }
}

.text-gray {
  line-height: 31px;
  color: @color-gray;

  &:hover {
    color: @color-gray;
  }
}

.text-red {
  line-height: 31px;
  color: @color-red;

  &:hover {
    color: darken(@color-red, 10%)
  }
}

.cursor-disabled {
  cursor: not-allowed;
}

.slider-container {
  @color-border: #EEEEEE;
  @color-background: #F5F5F5;
  @color-background-title: #D7DEE6;
  @color-text: #555555;
  @color-text-gray: #888888;
  @color-link: #54AFF0;

  display: block;
  position: fixed;
  height: 100%;
  width: 100%;

  .content-container {
    display: block;
    position: absolute;
    right: -365px;
    top: 0px;
    color: black;
    background-color: @color-background;
    overflow-y: hidden;
    width: 365px;
    height: 100%;
    z-index: 1041;
    overflow-y: auto;

    .t1 {
      padding: 0px 10px 10px 0px;
      font-weight: bold;
      color: @color-text;
    }

    .t2 {
      background-color: @color-background-title;
      padding: 9px;
      font-size: 12px;
      color: @color-text;
    }

    ul {
      margin-bottom: 10px;
    }

    li {
      position: relative;
      background-color: white;
      box-sizing: border-box;
      border-bottom: @color-border solid 1px;

      &:first-child {
        border-top: none;
      }

      &:last-child {
        border-bottom: @color-border solid 1px;
      }

      &:hover {
        background-color: @color-background;
      }

      .text {
        font-size: 14px;
        color: @color-text;
        font-weight: 400;
        padding: 9px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-right: 40px;
        cursor: pointer;

        &:hover {
          color: @color-link;
        }
      }

      .note {
        font-size: 12px;
        color: @color-text-gray;
        font-weight: 400;
        padding: 0px 0px 9px 9px;
      }

      .iconfont {
        .button();
        color: #A3A3A3;
        position: absolute;
        right: 11px;
        top: 18px;
        font-size: 22px;
        cursor: pointer;

        &:hover {
          color: @color-link;
        }
      }
    }
  }
}

.react-paginator {
  .pagination {
    margin: 10px 0;
  }
}

.card-extra-container {
  color: #cccccc;
  margin-top: 5px;
}

.event-table-baner {
  margin: 14px auto auto;

  .card-extra-container {
    margin-top: 0px;
  }
}

.position-relative {
  position: relative;
  .widget-tools {
    top: 5px;
    right: 100px;
    margin-bottom: 0;
    position: absolute;
    font-weight: normal;
    .iconfont {
      color: #888;
      margin-right: 10px;
      &:hover {
        color: #333;
      }
    }
  }
}

.paginator {
  margin-top: 15px;
  .page-info {
    float: left;
    line-height: 35px;
  }
  .react-paginator {
    margin: 0;
    float: right;
    .pagination {
      margin: 0;
    }
  }
}

.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.event-users {
  .event-users-list {
    overflow-x: auto;
  }
  th,
  td {
    min-width: 110px;
    max-width: 150px;
    border-top: 1px #ddd solid;
    border-left: 1px #ddd solid;
    &:last-child {
      border-right: 1px #ddd solid;
    }
  }
  td {
    span {
      width: 100%;
      float: left;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    &:first-child {
      min-width: 140px;
    }
  }
  th {
    .text-ellipsis;
  }
  tbody {
    tr:last-child {
      border-bottom: 1px #ddd solid;
    }
  }
  .pagination {
    a {
      color: #888;
    }
    .active {
      a {
        color: #fff;
      }
    }
  }
}

.popover-content {
  margin: -5px;
  border-radius: 4px;
  border: 2px #ececee solid;
  padding: 12px;
  .sequence-prop {
    td {
      font-size: 14px;
      padding: 8px;
      &:nth-child(2) {
        border-right: 1px solid #ececee;
        padding-right: 15px;
      }
      &:nth-child(3) {
        padding-left: 15px;
      }
      &:nth-child(1),
      &:nth-child(3) {
        text-align: right;
      }
    }
  }
}

.user-sequence {
  h5 {
    margin-bottom: 15px;
    font-weight: bold;
  }
  .paginate {
    width: 300px;
    margin: 15px auto 0 auto;
    a {
      color: #999;
      padding: 6px 16px;
      border-radius: 4px;
      cursor: not-allowed;
      border: 1px #999 solid;
    }
    .active {
      color: #56BC76;
      border-color: #56BC76;
      cursor: pointer;
      &:hover {
        color: #fff;
        background-color: #56BC76;
      }
    }
    .prev-page {
      float: left;
    }
    .next-page {
      float: right;
    }
  }
  .profile-item {
    margin-top: 10px;
  }
  .label {
    width: 50%;
    float: left;
    padding-right: 5px;
    text-align: right;
    box-sizing: border-box;
    color: #999;
  }
  .value {
    width: 50%;
    padding-left: 5px;
    float: right;
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .box, .widget-normal {
    height: 100%;
    box-sizing: border-box;
  }
  .mark-shadow {
    td {
      box-shadow: 1px 0 4px #899db4;
    }
  }
  .value-unknown {
    color: #EAC85E;
    border-color: #EAC85E;
    background: none;
  }
}

.custom-event {
  border-top: 1px solid #ececee;
}

.dynamic-title.widget-normal .widget-title {
  height: inherit;
}
